<template>
  <div>
    <el-table
      :data="table1"
      style="width: 100%"
      :header-row-style="{
        color: '#f6bd16',
        textAlign: 'center',
        fontSize: '16px'
      }"
      :header-cell-style="{
        textAlign: ' center'
      }"
      :row-style="{ color: '#f6bd16', height: '40px'}"
      :height="headersList.height"
      border
      @row-click="rowClick"
    >
      <el-table-column v-if="headersList.title" :label="headersList.title">
        <el-table-column
          v-for="item in headersList.data"
          :key="item.ZD"
          :label="item.label"
          :width="item.width || ''"
          :show-overflow-tooltip="true"
          :cell-style="{ textAlign: 'left' }"
        >
          <template slot-scope="{ row }">
            <p
              :style="
                +row[item.ZD]==row[item.ZD]
                  ? 'textAlign: right'
                  : 'textAlign: left'
              "
            >
              <span :style="item.size?'font-size:16px':''">{{ row[item.ZD] }}</span>
            </p>
          </template>
        </el-table-column>
      </el-table-column>
      <template v-if="!headersList.title && !headersList.header">
        <el-table-column
          v-for="item in headersList.data"
          :key="item.ZD"
          :label="item.label"
          :width="item.width || ''"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <p
              :style="
                +row[item.ZD]==row[item.ZD]
                  ? 'textAlign: right'
                  : 'textAlign: left'
              "
            >
              <span :style="item.size?'font-size:16px':''">{{ row[item.ZD] }}</span>
            </p>
          </template>
        </el-table-column>
      </template>
      <template v-if="headersList.header">
        <template v-for="(it, i) in headersList.data">
          <el-table-column v-if="it.title" :key="i" :label="it.title">
            <el-table-column
              v-for="its in it.data"
              :key="its.ZD"
              :label="its.label"
              :width="its.width || ''"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <p
                  :style="
                    +row[its.ZD]==row[its.ZD]
                      ? 'textAlign: right'
                      : 'textAlign: left'
                  "
                >
                  <span :style="its.size?'font-size:16px':''">{{ row[its.ZD] }}</span>
                </p>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column
            v-if="!it.title"
            :key="it.ZD"
            :label="it.label"
            :width="it.width || ''"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <p
                :style="
                  +row[it.ZD]==row[it.ZD]
                    ? 'textAlign: right'
                    : 'textAlign: left'
                "
              >
                <span :style="it.size?'font-size:16px':''">{{ row[it.ZD] }}</span>
              </p>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    table1: {
      type: Array,
      default: () => []
    },
    headersList: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    rowClick(val) {
      this.$emit('rowtableClick', val);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-table__header th {
  background: transparent !important;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-color: #143c6e;
  // border-bottom: 1px solid #32c5ff;
}
/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: transparent;
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/deep/.el-table__body tr:hover > td {
  background-color: rgba(91, 143, 249, 0.35) !important;
}
/deep/.el-table--border th,
.el-table--border td {
  border-color: #143c6e;
  // border-right: 2px solid #143c6e;
}
/deep/.el-table--group,
.el-table--border {
  border-color: #143c6e;
}
p{
  margin: 0;
}
</style>
